$wh: 200px;
$color1: red;
$bow-show: 0 0 10px #000;



* {
    padding: 0;
    margin: 0;
}
@mixin  boy($value,$w) {
    border: $value solid #000;
    width: $w;
}

h1 {
    // width: $wh;
    height: $wh;
    background: $color1;
    box-shadow: $bow-show;
    @include boy (20px,100px);


    // &:hover {
    //     background: blueviolet;
    // }
    &:hover {
        background: lighten($color1,50%);
    }
}

header {
    width: 100px;
    height: 100px;
    background: yellowgreen;
    margin-bottom: 100px;
    .head-cen {
          
        .head-cen-left {
             width: 50px;
             height: 50px;
             background: #ccc;
             float: left;
        }
        .head-cen-right {
            width: 50px;
            height: 50px;
            background: gray;
            float: right;
        }
    
    }

}

